<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>

    <hr>
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y:{{point.y}}</h2>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { ref } from 'vue';
    // 引入hooks函数
    import usePoint from '../hooks/usePoint';

    export default {
        name: 'Demo',
        setup() {
            console.log('---setup---')
            // 数据
            let sum = ref(0);

            // 引入usePoint 使用默认的暴露，暴露出去的是一个函数，所以这里可以直接使用
            let point = usePoint();
            
            // 返回一个对象（常用）
            return {
                sum,
                point
            }
        },

    }
</script>

<style>

</style>